<template>
	<xh-container title="详情">
		<view class="container">
			<view
				class="detail-item"
				v-for="item in detailColumns"
				:key="item.key"
			>
				<view class="detail-label">{{ item.label }}：</view>
				<view class="detail-value">{{ getText(item) || '-' }}</view>
			</view>
		</view>
	</xh-container>
</template>

<script>
import { decodeParams } from '@/utils/common.js';
export default {
	name: 'detailPage',
	data() {
		return {
			detailData: {},
			detailColumns: [],
		};
	},
	onLoad(options) {
		const { detailColumns, ...rest } = decodeParams(options);
		this.detailData = rest;
		this.detailColumns = JSON.parse(detailColumns);
	},
	methods: {
		getText(item) {
			const { valueMapList, isDetailFormat } = item;
			const val = this.detailData[item.key];
			if (Array.isArray(valueMapList) && isDetailFormat) {
				return valueMapList.find((item) => `${item.value}` === val)?.text;
			}
			return val;
		},
	},
};
</script>

<style scoped lang="scss">
.container {
	padding: 0 15px;
}
.detail-item {
	display: flex;
	font-size: 16px;
	padding: 10px 0;
	align-items: center;
	.detail-label {
		color: $uni-text-color-grey;
		width: 100px;
		text-align: right;
	}
}
</style>
